<script setup lang="ts">
import { addActAsk, addSub, getActDetail, getActList } from "@/api/admin";
import { FileUpload } from "@/components/common/FileUpload/index";
import { ImageViewer } from "@/components/common/ImageViewer";
import { handleDownload } from "@/utils/common";
import { message } from "@/utils/message";
import { ElMessageBox } from "element-plus";
import { onMounted, ref, watch } from "vue";
import { subFormRules } from "./rule";
defineOptions({
  name: "Activity"
});

const detailRef = ref();
const actForm = ref<any>({});
const fileJson = ref("");
const actList = ref([]);
const actIndex = ref(0);
const loading = ref(false);
const submitForm = ref<any>({
  name: "",
  contact: "",
  fileJson: ""
});
const loadActList = async () => {
  let params = {
    pageNum: 1,
    pageSize: 500
  };
  let { data } = await getActList(params);
  actList.value = data.records || [];
};

const loadDetail = async () => {
  if (actList.value.length == 0) {
    return;
  }
  loading.value = true;
  let dataId = actList.value[actIndex.value].id;
  if (dataId) {
    let { data } = await getActDetail({ id: dataId });
    let fileList = [];
    let coverList = [];
    if (data.docJson) fileList = JSON.parse(data.docJson);
    if (data.imageJson) coverList = JSON.parse(data.imageJson);
    data.fileList = fileList;
    data.coverList = coverList;
    actForm.value = data;
  }
  setTimeout(() => {
    loading.value = false;
  }, 200);
};

const ruleFormRef = ref();
const doSubmit = () => {
  ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(`是否确认提交投稿?`, "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        dangerouslyUseHTMLString: true,
        draggable: true
      }).then(async () => {
        await addSub(submitForm.value);
        ruleFormRef.value.resetFields();
        message("投稿成功", { type: "success" });
      });
    }
  });
};

async function handleDown(item) {
  ElMessageBox.confirm(`是否确认要下载文件 ${item.name} ?`, "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    dangerouslyUseHTMLString: true,
    draggable: true
  }).then(async () => {
    handleDownload(item);
  });
}

const doSubmitAsk = async () => {
  let params = {
    activityId: actList.value[actIndex.value].id,
    fileJson: fileJson.value
  };
  await addActAsk(params);
  message("提交问卷文件成功", { type: "success" });
  // setTimeout(() => {
  //   fileJson.value = "";
  // }, 1000);
};

watch(
  () => fileJson.value,
  newVal => {
    console.log("newVal", newVal);
    if (newVal) {
      doSubmitAsk();
    }
  }
);

const chooseAct = index => {
  actIndex.value = index;
  fileJson.value = "";
  loadDetail();
  ruleFormRef.value.resetFields();
  detailRef.value.scrollTop = 0;
};

onMounted(async () => {
  await loadActList();
  loadDetail();
});
</script>
<template>
  <div>
    <div class="activity">
      <div class="items">
        <div
          v-for="(item, index) in actList"
          :key="item.id"
          class="item block"
          :class="{ act: actIndex == index }"
          @click="chooseAct(index)"
        >
          {{ item.name || "--" }}
        </div>
      </div>
      <div class="content">
        <div class="header">
          <div>活動一覽</div>
        </div>
        <div ref="detailRef" v-loading="loading" class="detail">
          <div class="img">
            <template v-if="actForm.coverList && actForm.coverList.length > 0">
              <video
                v-if="actForm.coverList[0].suffix == 'mp4'"
                controls
                style="width: 100%; height: 100%"
                :src="
                  'https://xinmanrui.com/eduWebSiteApi' +
                  actForm.coverList[0].fileUrl
                "
              />
              <ImageViewer v-else :src="actForm.imageJson" />
            </template>
          </div>
          <div class="cell">
            <div class="cell-title">文件下載</div>
            <div class="cell-content">
              <div v-if="actForm.fileList && actForm.fileList.length > 0">
                <div
                  v-for="(item, index) in actForm.fileList"
                  :key="index"
                  class="file-name text-cut"
                  @click="handleDown(item)"
                >
                  {{ item.name || "--" }}
                </div>
              </div>
              <div v-else class="text-[#999]">暂无文件~</div>
            </div>
          </div>
          <div class="cell">
            <div class="cell-title">問卷提交</div>
            <div class="cell-content">
              <FileUpload v-model="fileJson" :limit="1" :maxSize="20" />
            </div>
          </div>

          <div class="cell !mb-0">
            <div class="cell-title" />
            <div class="cell-content">
              <el-form
                ref="ruleFormRef"
                :model="submitForm"
                :rules="subFormRules"
              >
                <div class="flex">
                  <el-form-item prop="name">
                    <div class="w-[300px]">
                      <div style="line-height: 30px; font-weight: bold">
                        投稿者名稱
                      </div>
                      <el-input
                        v-model="submitForm.name"
                        placeholder="投稿者名稱"
                        clearable
                      />
                    </div>
                  </el-form-item>
                  <el-form-item prop="contact" class="ml-12">
                    <div class="w-[300px]">
                      <div style="line-height: 30px; font-weight: bold">
                        聯絡
                      </div>
                      <el-input
                        v-model="submitForm.contact"
                        placeholder="聯絡"
                        clearable
                      />
                    </div>
                  </el-form-item>
                </div>
                <el-form-item prop="fileJson">
                  <FileUpload
                    v-model="submitForm.fileJson"
                    :limit="1"
                    :maxSize="20"
                  />
                  <!-- <el-upload
                      class="w-full"
                      drag
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      multiple
                    >
                      <img
                        src="@/assets/upload.png"
                        width="60"
                        height="48"
                        class="mb-3"
                      />
                      <div class="el-upload__text">
                        <em class="!text-[#9dbdba] font-bold">
                          Drag & drop files or Browse
                        </em>
                      </div>
                    </el-upload> -->
                </el-form-item>
                <div class="foot-btn">
                  <div class="btn block" @click="doSubmit()">提交投稿</div>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.activity {
  width: 80%;
  height: calc(100vh - 230px);
  display: flex;
  border-radius: 0 25px 25px 0;
  .items {
    width: 260px;
    color: #9dbdba;
    padding: 10px 15px 15px;
    font-size: 18px;
    font-weight: bold;
    margin-right: 15px;
    overflow: auto;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.95);
    .item {
      width: 100%;
      min-height: 62px;
      padding: 10px 15px;
      border: 2px solid #9dbdba;
      border-radius: 8px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .item.act {
      color: #409eff;
      border-color: #409eff;
    }
    .item.act::before,
    .item.act::after {
      background-color: #409eff;
    }
  }
  .block::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-color: #9dbdba;
  }
  .block::after {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    background-color: #9dbdba;
  }
  .content {
    flex: 1;
    border: 1px solid #d9d9d9;
    border-radius: 25px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.95);
    .header {
      font-size: 25px;
      font-weight: bold;
      height: 100%;
      height: 102px;
      line-height: 95px;
      padding-left: 30px;
      background-color: #9dbdbab2;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    }
    .detail {
      flex: 1;
      padding: 20px;
      overflow-x: hidden;
      overflow-y: auto;
      .img {
        width: 100%;
        height: 300px;
        border-radius: 10px;
        border: 1px solid #d9d9d9;
        margin-bottom: 20px;
      }
      .cell {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        .cell-title {
          font-size: 25px;
          font-weight: bold;
          min-width: 100px;
        }
        .cell-content {
          flex: 1;
          margin-left: 35px;
          overflow: hidden;
          .file-name {
            color: #656262;
            padding: 5px 10px;
            border-radius: 2px;
            background-color: #d9d9d9;
            cursor: pointer;
            margin-bottom: 10px;
          }
        }
      }
      .foot-btn {
        display: flex;
        justify-content: flex-end;
        .btn {
          color: #9dbdba;
          width: 180px;
          min-height: 62px;
          padding: 10px 15px;
          border: 2px solid #9dbdba;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
